<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none pt-4" shadow="never">
				<el-form class="ls-form el-set-form" :model="formData" inline>
					<el-form-item label="询价编号">
						<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
							@keyup.enter="resetPage" />
					</el-form-item>
					<el-form-item label="产品编号">
						<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
							@keyup.enter="resetPage" />
					</el-form-item>
					<el-form-item label="产品名称">
						<el-input class="w-[240px]" placeholder="请输入" v-model="formData.admin_name" clearable
							@keyup.enter="resetPage" />
					</el-form-item>
					<el-form-item label="状态">
						<el-select class="w-[120px]" v-model="formData.type" placeholder="请选择">
							<el-option v-for="(item, index) in visitType" :key="index" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button class="main-color1 w-[76px] h-[36px]" @click="resetParams">重置</el-button>
						<el-button class="w-[76px] bg-[#0054A6] h-[36px]" type="primary" @click="resetPage">查询</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card class="!border-none mt-[30px]" shadow="never">			   
				<el-table class="mt-[20px]" size="large" :data="pager.lists" v-loading="pager.loading"
				:header-cell-style="{'background':'#0054A6','color':'#FFB400','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"
				>
					<el-table-column label="询价编号" prop="scene_name" align="center" />
					<el-table-column label="询价时间" prop="type_desc" align="center" />
					<el-table-column label="报价状态" prop="scene_name" align="center" />
					<el-table-column label="修改描述" prop="type_desc" align="center" />
					<el-table-column label="原因" prop="scene_name" align="center" />
					<el-table-column label="操作" fixed="right" width="400" align="center" >
						<template #default="{ row }">
							<el-button 
							type="primary" 
							link
							>
								<router-link
									:to="{
										path: getRoutePath('SupplyPrice.SupplyPrice/quotation'),
										query: {
											id: 1
										}
									}"
								>
								   <span class="main-color1">报价</span>
								</router-link>
							</el-button>
							<el-button
							type="primary" 
							link
							>
								<router-link
									:to="{
										path: getRoutePath('SupplyPrice.SupplyPrice/viewPrice'),
										query: {
											id: 1
										}
									}"
								>
								   <span class="main-color1">查看报价</span>
								</router-link>
							</el-button>
							<el-button
							type="primary" 
							link
							>
								<span class="main-color1">修改报价</span>
							</el-button>
							<el-button
							type="primary" 
							link
							@click="dialogVisible = true"
							>
								<span class="main-color1">提交修改申请</span>
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>	
		</div>
		<!-- 提交申请弹框 -->
		<el-dialog
			v-model="dialogVisible"
			title="提交修改申请"
			width="400px"
			center
			:before-close="handleClose"
		>
			<div class="main-color flex el-set-form mb-5">
				<span class="whitespace-nowrap mr-3 mt-2">原因：</span>
				<el-input
				    v-model="textarea"
				    :rows="3"
				    type="textarea"
					resize="none"
				    placeholder="请输入"
				  />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" class="h-[36px] w-[100px]" @click="dialogVisible = false">
						确认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
	import { getRoutePath } from '@/router'
	import { noticeLists } from '@/api/message'
	import { usePaging } from '@/hooks/usePaging'
	import feedback from '@/utils/feedback'
	const dialogVisible = ref(false)
	const textarea = ref('')
	const formData = reactive({
		admin_name: '',
		url: '',
		ip: '',
		type: '',
		start_time: '',
		end_time: ''
	})
	// 产品分类
	const visitType = ref<Array<any>>([
		{
			label: '反击破配件',
			value: '1'
		},
		{
			label: '鄂破配件',
			value: '2'
		},
	])


enum NoticeEnums {
    USER = 1,
    PLATFORM = 2,
	HasRead = 3
}

const tabsActive = ref(NoticeEnums.USER)
const tabsMap = [
    {
        name: '全部',
        type: NoticeEnums.USER
    },
    {
        name: '未读',
        type: NoticeEnums.PLATFORM
    },
	{
	    name: '已读',
	    type: NoticeEnums.HasRead
	}
]

// 列表数据
const params = reactive({
    recipient: tabsActive
})
const { pager, getLists } = usePaging({
    fetchFun: noticeLists,
    params
})
const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    // await menuDelete({ id })
    getLists()
}
onActivated(() => {
    getLists()
})

getLists()
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
	.el-set-form:deep() .el-textarea__inner::placeholder {
		color: var(--el-text-color-main);
	}
</style>